<template>
  <primitive :object="scene" :cast-shadow="true" />
  <!-- 加载车子 -->
  <primitive :object="car" :cast-shadow="true" />
</template>

<script setup lang="ts">
import * as THREE from "three";
import { ref } from "vue";
import { useGLTF, useAnimations, GLTFModel } from "@tresjs/cientos";
const wheels = ["wheel_rr", "wheel_rl", "wheel_fr", "wheel_fl"];
const { scene, animations } = await useGLTF(
  "https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf"
);
const { scene: car } = await useGLTF("/glb/ferrari.glb", { draco: true });
scene.rotation.y = Math.PI;
scene.rotation.x = (Math.PI / 180) * 15;
scene.position.x = -0.2;
scene.position.y = 0.1;
scene.position.z = 0.2;
/**
 * 兔子变小
 */
scene.scale.set(0.5, 0.5, 0.5);
const { actions } = useAnimations(animations, scene);
const currentAction = ref(actions.Greeting);
console.log(currentAction.value);
/**
 * 兔子动起来
 */
currentAction.value.play();
/**
 * 车子跑起来
 */
wheels.forEach((wheel) => {
  const wheelMesh = scene.getObjectByName(wheel);
  console.log(wheelMesh);
  
  if (wheelMesh) {
    wheelMesh.castShadow = true;
    wheelMesh.receiveShadow = true;
  }
});
console.log(scene);
</script>

<style scoped></style>
